<template>
    <view>
        <!-- components/couponGetPopup/index.wxml -->
        <van-popup :show="showClone" position="bottom" :round="true" @close="onCloseFun">
            <view class="title">
                <text>可领用优惠券</text>
                <van-icon custom-class="close_icon" class-prefix="iconfont" name="danchuangguanbi" size="28rpx" color="#999999" @tap.native="onCloseFun"></van-icon>
            </view>
            <view style="background-color: #e8e8e8; height: 1rpx"></view>
            <scroll-view scroll-y :enhanced="true" :show-scrollbar="true" style="padding: 0 34rpx; max-height: 700rpx; box-sizing: border-box">
                <view v-if="coupons && coupons.length > 0">
                    <view v-for="(coupon, index) in coupons" :key="index">
                        <view class="coupon_item">
                            <span>
                                <van-image
                                    v-if="coupon.discountType == 0"
                                    width="116rpx"
                                    height="116rpx"
                                    src="https://cq-prd.oss-cn-hangzhou.aliyuncs.com/static/res/person/coupon_icon_1.png"
                                ></van-image>
                                <van-image
                                    v-else-if="coupon.discountType == 1"
                                    width="116rpx"
                                    height="116rpx"
                                    src="https://cq-prd.oss-cn-hangzhou.aliyuncs.com/static/res/person/coupon_icon_2.png"
                                ></van-image>
                                <van-image v-else width="116rpx" height="116rpx" src="https://cq-prd.oss-cn-hangzhou.aliyuncs.com/static/res/person/coupon_icon_3.png"></van-image>
                            </span>
                            <view style="margin: 0 24rpx; flex: 1">
                                <view class="coupon_name">{{ coupon.couponName }}</view>
                                <view class="expire_time">有效期：{{ coupon.startDate }}至{{ coupon.endDate }}</view>
                            </view>
                            <view style="display: flex; flex-direction: column; align-items: center">
                                <view style="display: flex; flex-direction: row; align-items: baseline; color: #fe8104">
                                    <block v-if="coupon.discountType == 0">
                                        <view style="font-size: 24rpx">￥</view>
                                        <view style="font-size: 56rpx">{{ coupon.discountAmount / 100 }}</view>
                                    </block>
                                    <block v-else-if="coupon.discountType == 1">
                                        <view style="font-size: 56rpx">{{ coupon.discountAmount / 10 }}</view>
                                        <view style="font-size: 24rpx">折</view>
                                    </block>
                                </view>
                                <van-button
                                    custom-class="get_button"
                                    round
                                    color="linear-gradient(90deg, #FFAA11 0%, #FE7E03 100%)"
                                    @click="get($event, { coupon })"
                                    :data-coupon="coupon"
                                >
                                    <view style="font-size: 24rpx">立即领取</view>
                                </van-button>
                            </view>
                        </view>

                        <view style="background-color: #e8e8e8; height: 1rpx"></view>
                    </view>
                </view>
                <view v-else style="min-height: 240rpx"></view>
            </scroll-view>
        </van-popup>
    </view>
</template>

<script>
// components/couponGetPopup/index.js
export default {
    data() {
        return {
            coupon: {
                discountType: 0,
                couponName: '',
                startDate: '',
                endDate: '',
                discountAmount: 0
            },

            showClone: false
        };
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        coupons: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        onCloseFun() {
            this.setData({
                showClone: false
            });
        },
        get(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let coupon = e.currentTarget.dataset.coupon;
            this.$emit('getCoupon', {
                detail: coupon
            });
        }
    },
    created: function () {},
    watch: {
        show: {
            handler: function (newVal, oldVal) {
                this.showClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './index.css';
</style>
